<extend name="Public/base"/>
<block name="head">
    <!-- DATA TABLES -->
    <link href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/plugins/datatables/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/plugins/datatables/extensions/TableTools/css/dataTables.tableTools.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="__PUBLIC__/dist/css/bootstrapValidator.css"/>
    <link rel="stylesheet" href="__PUBLIC__/dist/css/tagmanager.css"/>
    <link rel="stylesheet" href="__PUBLIC__/fileinput/fileinput2.css"/>
    <!--<link href="__PUBLIC__/fileinput/fileinput.css" rel="stylesheet" type="text/css" />-->
    <style>
        div#video-grid li {
            padding-bottom: 10px;
        }
        #video-grid .caption{
            position: absolute;
            bottom: 0;
            width: 100%;
            color: #207ECE;
            left: 0;
            background-color: rgba(210,214,222,0.3);
            border-radius: 4px;
            height: 52px;
            background-image: none;
            display: none;
        }
        .video_filter_box .panel-body {
            padding: 10px 28px;
        }
        .video_filter_box .panel-body a,.video_filter_box .panel-body label{
            margin: 10px;
        }
        .video_filter_box .panel-body ul{
            line-height: 40px;
        }
        .video_filter_box .panel-body a.active {
            color:dodgerblue !important;
        }
        .video_filter_box .panel-body a:hover {
            color: dodgerblue !important;
        }
        .video_filter_box .panel-body .searchbox{
            margin-bottom: 10px;
        }
        .video_filter_box .tm-tag a {
            padding: 0px 5px;
            font-size: small;
            font-weight: bold;
        }
        .video_filter_box .tm-tag a:hover{
            color: #047340 !important;
        }
        .video_filter_box .filter-result  li{float: left}
    </style>
</block>

<block name="body">
    <section class="content">

        <div class="panel panel-primary search-form video_filter_box "  <?php if($view == 'video-list'): ?>style="display: none"<?php endif; ?>>
            <div class="panel-heading clearfix" style="  padding: 7px 15px;">
                <div class="col-md-1">
                    <label>{$Think.lang.Filter}</label>
                </div>
                <div class="col-md-11">
                <!--<?php if ($_SESSION['category_id'] || $_SESSION['video_label'] || $_SESSION['main_people'] || $_SESSION['search_data']): ?>-->
                    <!--<span class="pull-left">{$Think.lang.Filter Data}:&nbsp;&nbsp;</span>-->
                <!--<?php endif; ?>-->
                <ul class="list-unstyled filter-result">
                    <?php if ($_SESSION['search_data']): ?>
                    <li>
                        <span class="tm-tag no-padding" style="margin: 0 10px" >{$Think.lang.KeyWord}:<span class="text-red">{$_SESSION['search_data']|getOptionsLabel = $categorys}</span><a  href="__URL__/index/search_data/clear"  class="text-red">x</a></span>
                    </li>
                    <?php endif; ?>
                    <?php if ($_SESSION['category_id']): ?>
                        <li>
                            <span class="tm-tag no-padding" style="margin: 0 10px" >{$Think.lang.Category}:<span class="text-red">{$_SESSION['category_id']|getOptionsLabel = $categorys}</span><a  href="__URL__/index/category_id/all"  class="text-red">x</a></span>
                        </li>
                    <?php endif; ?>
                    <?php if ($_SESSION['video_label']): ?>
                    <li>
                        <span class="tm-tag no-padding" style="margin: 0 10px" >{$Think.lang.Lable}:<span class="text-red">{$_SESSION['video_label']}</span><a  href="__URL__/index/attr_id/1" class="text-red" >x</a></span>
                    </li>
                    <?php endif; ?>
                    <?php if ($_SESSION['main_people']): ?>
                    <li>
                        <span class="tm-tag no-padding" style="margin: 0 10px"  >{$Think.lang.Main People}:<span class="text-red">{$_SESSION['main_people']}</span><a  href="__URL__/index/attr_id/2" class="text-red" >x</a></span>
                    </li>
                    <?php endif; ?>

                </ul>
                    <?php if ($_SESSION['category_id'] || $_SESSION['video_label'] || $_SESSION['main_people'] || $_SESSION['search_data']): ?>
                    &nbsp;&nbsp; <span class="pull-right"><a href="__URL__/index/resetForm/true" style="color: #ffffff">{$Think.lang.All revoked}</a></span>
                    <?php endif; ?>
                </div>
            </div>
            <div class="panel-body list-group">
                <div class="row searchbox ">
                    <div class="col-md-2 text-right hidden-xs">
                        <label>{$Think.lang.KeyWord}:</label>
                    </div>
                    <div class="col-md-6 text-left">
                        <form action="__URL__" method="post" >
                            <!--<button title="submit" type="submit" class="btn btn-primary">{$Think.lang.Search}</button>-->
                            <div class="input-group">
                                <input type="text" class="form-control" autocomplete="off"  id="video_search" name="search_data" value="{$_SESSION['search_data']}" style="padding: 6px 12px;" placeholder="Search for..." data-provide="typeahead" />
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                                  </span>
                            </div><!-- /input-group -->
                        </form>
                    </div>
                </div>

                <?php if (!$_SESSION['category_id'] && count($categorys)): ?>
                <div class="row hidden-xs list-group-item">
                    <div class="col-md-2 text-right">
                        <label>{$Think.lang.Category}:</label>
                    </div>
                    <div class="col-md-10  text-left">
                        <ul class="list-unstyled list">
                            <!--<li class="pull-left"><a href="__URL__/index/category_id/all" class="<?php if(!$_SESSION['category_id']): ?>active<?php endif; ?> text-black">{$Think.lang.All}</a></li>-->
                            <volist name="categorys" id="cat">
                                <li class="pull-left"><a href="__URL__/index/category_id/{$cat['value']}" class="<?php if($_SESSION['category_id'] == $cat['value']): ?>active<?php endif; ?> text-black">{$cat['label']}</a></li>
                            </volist>
                        </ul>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (!$_SESSION['video_label'] && count($video_label)): ?>
                <div class="row hidden-xs list-group-item">
                    <div class="col-md-2 text-right ">
                        <label>{$Think.lang.Lable}:</label>
                    </div>
                    <div class="col-md-10  text-left">
                        <ul class="list-unstyled list">
                            <!--<li class="pull-left"><a href="__URL__/index/attr_id/1" class="<?php if(!$_SESSION['video_label']): ?>active<?php endif; ?> text-black">{$Think.lang.All}</a></li>-->
                            <volist name="video_label" id="v_lab">
                                <li class="pull-left"><a href="__URL__/index/attr_value/{$v_lab['attr_value']}/attr_id/{$v_lab['attr_id']}" class="<?php if($_SESSION['video_label'] == $v_lab['attr_value']): ?>active<?php endif; ?> text-black">{$v_lab['attr_value']}</a></li>
                            </volist>
                        </ul>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (!$_SESSION['main_people'] && count($main_people)): ?>
                <div class="row hidden-xs list-group-item">
                    <div class="col-md-2  text-right">
                        <label>{$Think.lang.Main People}:</label>
                    </div>
                    <div class="col-md-10  text-left">
                        <ul class="list-unstyled list">
                            <!--<li class="pull-left"><a href="__URL__/index/attr_id/2" class="<?php if(!$_SESSION['main_people']): ?>active<?php endif; ?>" style="color: #000000">{$Think.lang.All}</a></li>-->
                            <volist name="main_people" id="m_people">
                                <li class="pull-left"><a href="__URL__/index/attr_value/{$m_people['attr_value']}/attr_id/{$m_people['attr_id']}" class="<?php if($_SESSION['main_people'] == $m_people['attr_value']): ?>active<?php endif; ?>" style="color: #000000">{$m_people['attr_value']}</a></li>
                            </volist>
                        </ul>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs pull-right <?php echo $video_role; ?>">
                <li class="video-list"><a href="#video-list" data-toggle="tab" onclick="$('.search-form').hide()">{$Think.lang.List}</a></li>
                <li class="video-grid"><a href="#video-grid" data-toggle="tab" onclick="$('.search-form').show()" >{$Think.lang.Grid}</a></li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="tab-pane " id="video-list" >
                            <div class="box ">
                                <div class="box-body table-responsive">
                                    <table id="video-tables" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>{$Think.lang.编号}</th>
                                                <th>{$Think.lang.视频标题}</th>
                                                <th>{$Think.lang.分类}</th>
                                                <th>{$Think.lang.主要人物}</th>
                                                <th>{$Think.lang.上传人}</th>
                                                <th>{$Think.lang.上传时间}</th>
                                                <th>{$Think.lang.操作}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <volist name="lists" id="vo" key="j" >
                                                <tr data="{$vo['id']}" >
                                                    <td>{$j}</td>
                                                    <td>
                                                        <a href="javascript:;" data-title="video detail" data-toggle="modal" data-target="#video-detail" data="{$vo['id']}" onclick="ajaxLoadViewDetail(this)">
                                                            <i class="fa  fa-youtube-play"></i> {$vo['title_cn']}{$vo['title_en']}
                                                        </a>
                                                    </td>
                                                    <td>{$vo['category_id']|getOptionsLabel = $categorys}</td>
                                                    <td>
                                                        <?php
                                                           $peoples = getMainPeople($vo['id']);
                                                           foreach($peoples as $item) {
                                                             echo $item.' ';
                                                           }
                                                        ?>
                                                    </td>
                                                    <td>{$vo['creator']}</td>
                                                    <td>{$vo['created_at']}</td>
                                                    <td>
                                                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                                                            <a href="javascript:;"  url="__URL__/edit/id/{$vo['id']}" class="ajax-callback">
                                                            <button class="btn btn-primary btn-xs"    data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon  glyphicon-edit"></span> </button>
                                                            </a>
                                                        </p>
                                                    </td>
                                                </tr>
                                            </volist>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                </div>
                <div class=" tab-pane  " id="video-grid">
                    <div class="box box-primary">
                        <div class="box-header"></div>
                        <div class="box-body ">
                            <ul class="list-unstyled list thumbnails">
                            <?php if (count($videolist)): ?>
                            <volist name="videolist" id="vo" >
                                <?php if($vo['youku_url'] || $vo['youtube_url']): ?>
                                    <li class="col-md-4 col-sm-6 ">
                                        <div class="thumbnail" style="  position: relative;">
                                            <img src="<?php echo  $vo['video_thumbnail']==''?'__PUBLIC__/img/video_default.png':$vo['video_thumbnail'] ?>"
                                                 class="img-responsive thumbnail margin no-padding" style="max-height: 240px" />
                                            <div class="caption">
                                                <div class="col-md-9">
                                                    <h5 >{$vo['title_cn']}{$vo['title_en']}</h5>
                                                </div>
                                                <div class=" col-md-3">
                                                    <a href="javascript:;" class="image-btn-primary pull-right" data-title="video detail" data-toggle="modal" backdrop="static" keyboard="false" data-target="#video-detail" data="{$vo['id']}"
                                                       onclick="ajaxLoadViewDetail(this)"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                 <?php endif; ?>
                            </volist>
                             <?php else: ?>
                                <li>
                                    <div class="error-page">
                                        <h2 class="headline text-yellow"> 404</h2>
                                        <div class="error-content" style="padding-top: 20px;">
                                            <h3><i class="fa fa-warning text-yellow"></i> Oops! Video not found.</h3>
                                            <p>
                                                We could not find the video you were looking for.
                                                Meanwhile, you may <a href="__URL__/index/resetForm/true">reset form</a> or try  re search form.
                                            </p>
                                        </div><!-- /.error-content -->
                                    </div>
                                </li>
                             <?php endif; ?>
                            </ul>
                        </div>
                        <div class="box-footer">
                            <ul class="pagination pull-right" id="video_page_tools">
                                {$page}
                            </ul>
                        </div>
                    </div>
                </div>
           </div>
       </div>
        <include file="add" />
        <include file="edit" />
        <include file="video_detail" />
    </section><!-- /.content -->

</block>
<block name="script">

    <script src="__PUBLIC__/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/bootstrapValidator.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/language/zh_CN.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/validator.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/bootstrap-typeahead.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/underscore-min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/dist/js/tagmanager.js" type="text/javascript"></script>

    <script type="text/javascript">
        var nofindImg = '<img src="__PUBLIC__/img/exclamation.png"  class="img-responsive" style=" margin: 0 auto;" />';
        $(function () {
            iniDataTable("#video-tables",'iniVideoDetail()','__URL__');
            iniAjaxFormDialog('#videoAddForm','#add');
            iniAjaxFormDialog('#videoEditForm','#edit');
            iniAjaxFormDialog('#videoViewForm','#video-detail',true);
            Validator('videoViewForm');

        });

        function iniVideoDetail() {
            $('.video-thumbnail').hide().attr('src','');
            iniLable('');
        }

        /**
         *  bootstarp
         *  autocomplete
         */
            $.fn.typeahead.Constructor.prototype.blur = function () {
                var that = this;
                setTimeout(function () {
                    that.hide()
                }, 250);
            };

            var searchQueryObject = {
                queryFn: function (object) {
                    object.typeahead({
                        source: function (query, process) {
                            var parameter = {query: query};
                            $.post('__URL__/ajaxGetAttribute', parameter, function (data) {
                                process(eval(data));
                            });
                        },

                        matcher: function (item) {
                            return true;
                        },

                        highlighter: function (data) {
                            return '==> ' + data + ' <==';
                        },

                        updater: function (data) {
                            return data;
                        }
                    });
                }
            };
            searchQueryObject.queryFn($('#video_search'));


        //编辑事件的回调函数
        $('.ajax-callback').bind('click',function(){
            ajaxObject.ajaxCallBackFn(this,function(result){
                var data = $.parseJSON(result);
                videoEditForm.id.value = data.id;
                videoEditForm.youku_url.value = data.youku_url;
                videoEditForm.youtube_url.value = data.youtube_url;
                videoEditForm.title_cn.value = data.title_cn;
                videoEditForm.title_en.value = data.title_en;
                videoEditForm.intro.value = data.intro;
                iniLable(data);

                $('.video-thumbnail').hide();
                if(data.video_thumbnail){
                    $('.video-thumbnail').show().attr('src',data.video_thumbnail);
                }
                var lans = videoEditForm.lan.options;
                for(var i in lans){
                    if(lans[i].value == data.lan){
                        lans[i].defaultSelected = true;
                        lans[i].selected = true;
                    }
                }
                var cats = videoEditForm.category_id.options;
                for(var j in cats){
                    if(cats[j].value == data.category_id){
                        cats[j].defaultSelected = true;
                        cats[j].selected = true;
                    }
                }

            });
        });

        /**
         * 初始化 video tag数据
         * @param data
         */
        function iniLable(data) {
            var tagDiv = $('.video_tag_block');
            var peopleDiv = $('.video_people_block');
            var tags = data == ''?'':data.tag.split(' ');
            var peoples = data == ''?'':data.people.split(' ');
            tagDiv.html('');peopleDiv.html('');
            searchQueryObject.queryFn(tagDiv.append(' <input type="text" class="form-control tag-input" autocomplete="off" id="addNewTagInput"  placeholder="请输入标签，使用回车键来添加，删除键删除标签" />')
                    .find("#addNewTagInput").tagsManager({
                        prefilled: tags,
                        AjaxPush: '__URL__/ajaxPushLabel',
                        maxTags:10,
                        AjaxPushAllTags: true,
                        AjaxPushParameters: { 'video_id':data.id,'attr_id':1 }
             }));
            searchQueryObject.queryFn(peopleDiv.append(' <input type="text" class="form-control tag-input" autocomplete="off" id="addNewPeopleInput"  placeholder="请输入标签，使用回车键来添加，删除键删除标签" />')
                    .find("#addNewPeopleInput").tagsManager({
                        prefilled: peoples,
                        AjaxPush : '__URL__/ajaxPushLabel',
                        maxTags  : 10,
                        AjaxPushAllTags :true,
                        AjaxPushParameters :{ 'video_id':data.id,'attr_id':2 }
            }));
        }

        $(function(){


            $(".tag-input").on('tm:afterPush', function(e, tag) {
                alert(tag + " was pushed!");
            });

            $('#<?php  echo $view ?>').addClass('active');
            $('.<?php  echo $view ?>').addClass('active');
            //视频详情 切换平台事件
            $('.toggle-video').bind('click',function(){
                var video = $('.detail.detail-video');
                var youtube_url = $('.video-youtube').val();
                var youku_url = $('.video-youku').val();
                $('#no-find-video').html('');
                if (video.attr('lan') == 'zh-cn'){
                    if(youtube_url == ''){
                        $('#no-find-video').html(nofindImg);
                    }
                    video.attr('src',youtube_url).attr('lan','en-us');
                    $('#toggle_share').find('.share_link').val(youtube_url);
                    $(this).html('<img src="__PUBLIC__/img/Yk-logo.png" width="65px" title="YouKu"  />');
                } else {
                    if(youku_url == ''){
                        $('#no-find-video').html(nofindImg);
                    }
                    video.attr('src', youku_url).attr('lan', 'zh-cn');
                    $('#toggle_share').find('.share_link').val(youku_url);

                    $(this).html('<img src="__PUBLIC__/img/YouTube-logo.png" width="65px" title="YouTuBe"  />');
                }

            });

        });
        //分类存入js变量
        var categorys = new Array();
        <?php foreach($categorys as $item){ ?>
            categorys[<?php echo $item['value'] ?>] = '<?php echo $item["label"] ?>';
        <?php } ?>

//        $('#video-detail').modal({backdrop: 'static', keyboard: false});
//        $('#video-detail').modal('hide');
        //ajax 加载视频详情
        function ajaxLoadViewDetail(e) {
            var id = $(e).attr('data');
            $.post('__URL__/viewDetail',{
                id:id
            },function(result){
                videoViewForm.reset();
                var data = $.parseJSON(result);
                var lan = '<?php echo LANG_SET ?>';
                var info = $('#toggle_info');
                var share = $('#toggle_share');
                var title = '';
                $('#no-find-video').html('');
                if (lan == 'zh-cn'){
                    $('.detail.detail-video').attr('src',data.youku_url).attr('lan','zh-cn');
                    title = data.title_cn;
                    share.find('.share_link').val(data.youku_url);
                    $('.toggle-video').html('<img src="__PUBLIC__/img/YouTube-logo.png" width="65px" title="YouTuBe" />');
                    if (!data.youku_url){
                        $('#no-find-video').html(nofindImg);
                    }
                }else {
                    title = data.title_en;
                    $('.detail.detail-video').attr('src',data.youtube_url).attr('lan','en-us');
                    share.find('.share_link').val(data.youtube_url);
                    $('.toggle-video').html('<img src="__PUBLIC__/img/Yk-logo.png" width="65px" title="YouKu" />');
                    if (!data.youtube_url){
                        $('#no-find-video').html(nofindImg);
                    }
                }
                $('.video-youtube').val(data.youtube_url);

                $('.video-youku').val(data.youku_url);

                info.find('.title_name').html(title);
                share.find('.share_title').val(title);
                share.find('.video_id').val(data.id);

                info.find('.intro').html(data.intro);
                info.find('.people').html(data.people);
                info.find('.tag').html(data.tag);
                info.find('.created_at').html(data.created_at);
                info.find('.category').html(categorys[data.category_id]);
                info.find('.creator').html(data.creator);
                $('#videoViewForm .copytext').html('');
            });
        }
        //鼠标移动到视频缩略图 显示播放按钮
        $('#video-grid .thumbnails .thumbnail').hover(function(){
            $(this).find('.caption').toggle();
        });



        //禁用Enter键表单自动提交
        document.onkeydown = function(event) {
            var target, code, tag;
            if (!event) {
                event = window.event; //针对ie浏览器
                target = event.srcElement;
                code = event.keyCode;
                if (code == 13) {
                    tag = target.tagName;
                    if (tag == "TEXTAREA") { return true; }
                    else { return false; }
                }
            }
            else {
                target = event.target; //针对遵循w3c标准的浏览器，如Firefox
                code = event.keyCode;
                if (code == 13) {
                    tag = target.tagName;
                    if (tag == "INPUT") { return false; }
                    else { return true; }
                }
            }
        };
    </script>
</block>